<!--
 * @name: 批量导入欠薪诉求 
 * @Date: 2020-12-11 15:10
 * @param {*}
 * @Author: 471826078@qq.com
 */
 -->
<template>
  <div class="container">
    <topTitle :titleText="titleText"></topTitle>
    <div class="mainCon">
      <el-steps
        :active="active"
        finish-status="success"
        align-center
        style="padding-bottom: 24px"
      >
        <el-step title="上传欠薪诉求"></el-step>
        <el-step title="数据上传中"></el-step>
        <el-step title="确认导入内容"></el-step>
        <el-step title="无效件设置"></el-step>
        <el-step title="返回列表"></el-step>
      </el-steps>
      <div class="spacing"></div>
      <div class="mainConImport" v-if="active == 0">
        <p>上传欠薪诉求</p>
        <div class="mainConImportUp">
          选择导入文件：
          <el-input
            class="mainConImportUpInput"
            readonly
            v-model="fileName"
          ></el-input>
          <div class="uploadBox">
            <el-button class="uploadImg" @click="$refs['salaryForm'].click()"
              >选择上传文件</el-button
            >
            <div class="upLoadDom">
              <form id="ExcelAgreement">
                <input
                  type="file"
                  id="salaryExcelAgr"
                  name="multipartFile"
                  @change="waterImportfileChange"
                  ref="salaryForm"
                />
              </form>
            </div>
          </div>
          <!-- 下载《欠薪诉求模板》 -->
          <div class="mainConImportTips">
            请按照模板导入,点击
            <el-link class="downloadTip" @click="downImployee"
              >下载 《欠薪诉求模板》</el-link
            >
          </div>
        </div>
      </div>
      <div class="mainConImport" v-if="active == 1">
        <p>数据上传中</p>
        <hprogress
          ref="hjprogress"
          :speed="8"
          :progres="progress"
          @isFinished="isFinished"
          :finished="finished"
          :isError="isError"
        />
      </div>
      <!-- 确认导入内容 -->
      <div class="mainConTable" v-if="active == 2">
        <p class="mainConTableTips tipIcon">
          <i class="el-icon-warning"></i
          >请确认导入的内容是否有误，如确认无误请点击【确定导入】。如有误可删除该条信息，并请重新提交导入。
          <span>本次成功上传{{ updateMsgLength }}条。</span>
        </p>
        <div style="padding: 0 24px 36px">
          <el-table
            :data="showTableList"
            empty-text="暂无信息，请及时补充"
            v-loading="loading"
            :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
            highlight-current-row
            stripe
            style="border: 1px solid #dfe6ec"
            ref="multipleTable"
          >
            <el-table-column
              prop="complaintContent"
              label="欠薪诉求内容"
              width="230"
              align="left"
            >
              <template slot-scope="scope">
                <copyText
                  :tableIndex="scope.$index"
                  :copyTextName="scope.row.complaintContent"
                  :columnName="'complaintContent'"
                ></copyText>
              </template>
            </el-table-column>
            <el-table-column
              prop="complaintPerName"
              label="市民姓名"
            ></el-table-column>
            <el-table-column
              prop="complaintPerTel"
              label="市民电话"
            ></el-table-column>
            <el-table-column
              prop="department"
              label="部门名称"
            ></el-table-column>
            <el-table-column
              prop="complaintEndDate"
              label="规定完成时间"
            ></el-table-column>
            <el-table-column
              label="操作"
              fixed="right"
              align="left"
              width="100px"
            >
              <template slot-scope="scope">
                <el-link type="primary" @click="deleteTables(scope.row.deleId)"
                  >删除</el-link
                >
              </template>
            </el-table-column>
          </el-table>

          <el-pagination
            style="margin: 24px 0; text-align: right"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageNo"
            :page-sizes="[5, 10, 20, 50]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="tableList.length"
          ></el-pagination>
        </div>
      </div>
      <!-- 无效件设置 -->
      <div v-if="active == 3">
        <invalidPiece
          @cancleExportIn="cancleExportIn"
          :wxList="wxList"
          @sureExportIn="sureExportIn"
        ></invalidPiece>
      </div>
      <div class="mainConFinshed" v-if="active == 4">
        <!-- <img :src="require('@/assets/success.png')" alt /> -->
        <i class="icon iconfont iconwancheng img"></i>
        <h2>导入完成</h2>
        <p>
          本次成功导入
          <span class="tips">{{ tableList.length - errList.length }}条</span>
          ，您可以稍后在欠薪诉求列表页查看导入结果
        </p>
      </div>
      <div class="mainConTip" v-show="active == 4 && errList.length > 0">
        <h3 style="color: #e02020">以下为导入失败的数据:</h3>
        <el-table
          :data="currentErrList"
          empty-text="暂无信息，请及时补充"
          :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
          highlight-current-row
          stripe
          style="border: 1px solid #dfe6ec; margin-top: 24px"
          ref="multipleTable"
        >
          <el-table-column
            prop="complaintContent"
            label="欠薪诉求内容"
            align="left"
            :formatter="formatTd"
            width="230"
          >
            <template slot-scope="scope">
              <copyText
                :tableIndex="scope.$index"
                :copyTextName="scope.row.complaintContent"
                :columnName="'complaintContent'"
              ></copyText>
            </template>
          </el-table-column>
          <el-table-column
            prop="complaintPerName"
            label="市民姓名"
          ></el-table-column>
          <el-table-column
            prop="complaintPerTel"
            label="市民电话"
          ></el-table-column>
          <el-table-column prop="department" label="部门名称"></el-table-column>
          <el-table-column
            prop="complaintEndDate"
            label="规定完成时间"
          ></el-table-column>
          <el-table-column prop="errmsg" label="错误提示">
            <template slot-scope="scope">
              <span v-if="scope.row.errmsg.length < 20">{{
                changeBr(scope.row.errmsg)
              }}</span>
              <el-tooltip class="item" effect="dark" placement="top-end" v-else>
                <div style="width: 400px; line-height: 20px" slot="content">
                  {{ changeBr(scope.row.errmsg) }}
                </div>
                <span>{{ scope.row.errmsg.substring(0, 25) + '...' }}</span>
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          style="margin: 24px 0; text-align: right"
          @size-change="sizeChange"
          @current-change="currentChange"
          :current-page="pageNoResult"
          :page-sizes="[5, 10, 20, 50]"
          :page-size="pageSizeResult"
          layout="total, sizes, prev, pager, next, jumper"
          :total="errList.length"
        ></el-pagination>
      </div>
      <div class="mainConBottom">
        <el-button
          type="primary"
          class="saveBtn"
          v-sdc
          @click="uploadImployee"
          v-if="active == 0"
          >上传欠薪诉求</el-button
        >
        <el-button v-if="active == 0" @click="toBackmployees" v-sdc
          >返回</el-button
        >
        <el-button v-if="active == 1" @click="cancelUpload" v-sdc
          >取消上传</el-button
        >
        <el-button
          v-if="active == 2"
          class="saveBtn"
          v-sdc
          @click="sureStepExportIn"
          >确认导入</el-button
        >
        <el-button v-if="active == 2" @click="cancleExportIn" v-sdc
          >取消导入</el-button
        >
        <el-button
          v-if="active == 4"
          style="margin-top: 60px"
          @click="toBackmployees"
          v-sdc
          >查看欠薪诉求</el-button
        >
      </div>
    </div>
    <el-dialog
      class="progress"
      :visible.sync="centerDialogVisible"
      width="800"
      center
      :modal-append-to-body="false"
      :append-to-body="true"
    >
      <hprogress
        ref="hjprogressUpload"
        :speed="3"
        :progres="progressUpload"
        @isFinished="isFinishedUpload"
        :finished="finishedUpload"
        :isError="isErrorUpload"
      />
    </el-dialog>
  </div>
</template>
<script>
import hprogress from '@/components/publicCom/progress'
import invalidPiece from './invalidPiece'
import common from '@/kits/common'
export default {
  name: 'whBatchImportCase',
  components: {
    hprogress,
    invalidPiece,
  },
  data() {
    return {
      titleText: '批量导入欠薪诉求',
      active: 0,
      progress: 0,
      isError: false,
      timer: null,
      initTime: 70,
      finished: false,
      errMsg: '',
      tableList: [],
      showTableList: [],

      loading: false,
      fileName: '',
      flieUpload: {},
      centerDialogVisible: false,
      progressUpload: 0,
      finishedUpload: false,
      isErrorUpload: false,
      pageSize: 5,
      pageNo: 1,
      updateMsgLength: 0,

      pageNoResult: 1,
      pageSizeResult: 5,
      errList: [],
      currentErrList: [],
      wxList: [],
    }
  },
  watch: {
    active(val) {
      if (val == 1) {
        if (!this.finished) {
          this.$nextTick(function () {
            this.$refs.hjprogress.setProgress()
          })
        }
      }
    },
  },
  methods: {
    changeBr(str) {
      return str.replace('<br/>', '')
    },

    handleSizeChange(val) {
      this.pageNo = 1
      this.pageSize = val
      this.showTableList = this.tableList.filter((item, index) => {
        return (
          index >= (this.pageNo - 1) * this.pageSize &&
          index < this.pageNo * this.pageSize
        )
      })
    },
    handleCurrentChange(val) {
      this.pageNo = val
      this.showTableList = this.tableList.filter((item, index) => {
        return (
          index >= (this.pageNo - 1) * this.pageSize &&
          index < this.pageNo * this.pageSize
        )
      })
    },
    sizeChange(val) {
      this.pageNoResult = 1
      this.pageSizeResult = val
      this.currentErrList = this.errList.filter((item, index) => {
        return (
          index >= (this.pageNoResult - 1) * this.pageSizeResult &&
          index < this.pageNoResult * this.pageSizeResult
        )
      })
    },
    currentChange(val) {
      this.pageNoResult = val
      this.currentErrList = this.errList.filter((item, index) => {
        return (
          index >= (this.pageNoResult - 1) * this.pageSizeResult &&
          index < this.pageNoResult * this.pageSizeResult
        )
      })
    },
    isFinished(val) {
      this.progress = val
      if (val == 100) {
        setTimeout(() => {
          this.active = 2
        }, 100)
      } else {
        this.$message({
          message: this.errMsg,
          type: 'error',
          duration: 2000,
        })
      }
    },
    isFinishedUpload(val) {
      this.progressUpload = val
      if (val == 100) {
        this.centerDialogVisible = false
        this.active = 4
      } else {
        //导入错误
      }
    },
    /**
     * @name: 返回全部欠薪诉求
     * @param {type}
     * @Author: luoyong/471826078@qq.com
     */
    toBackmployees() {
      var url
      if (this.$route.query.mark == 'backPayDemands') {
        url = '/home/specialAccount/backPayDemands'
      } else if (this.$route.query.mark == 'myResponsible') {
        url = '/home/specialAccount/myResponsible'
      } else if (this.$route.query.mark == 'jurisdictionsPayDemands') {
        url = '/home/specialAccount/jurisdictionsPayDemands'
      }
      this.$router.push(url)
      this.$store.commit('CHANGE_SLIDER_NAME', {
        oldUrl: url,
        newUrl: this.$router.currentRoute.fullPath,
      })
    },
    /**
     * @name: 下载欠薪投诉模板
     * @param {type}
     * @Author: luoyong/471826078@qq.com
     */
    downImployee() {
      this.axios({
        method: 'post',
        url: 'api-r/rbp/import/getTemplateUrl',
      })
        .then((response) => {
          if (!response.data.hasError) {
            window.location.href = response.data.result
          }
        })
        .catch((error) => {})
    },
    // 流水导入 ------start
    waterImportfileChange(e) {
      var that = this
      this.errMsg = ''
      this.fileName = ''
      var url = window.location.href
      var Filedata = e.target.value
      var files = e.target.files[0]
      if (Filedata == '' || Filedata == undefined) {
        return
      }
      if (!/\.(xls|xlsx)$/.test(Filedata)) {
        this.$message({
          message: 'excel类型必须是.xls,xlsx中的一种',
          type: 'warning',
        })
        return
      }
      this.fileName = files.name
    },
    uploadFileByAjaxSubmit(url, successCallBack, errorCallBack) {
      const that = this
      var token = localStorage.getItem('access_token')
      var options = {
        url: common.uploadUrl + url,
        type: 'POST',
        dataType: 'json',
        headers: { Authorization: 'Bearer ' + token },

        success: function (data) {
          $('#salaryExcelAgr').val('')
          successCallBack(data)
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
          $('#salaryExcelAgr').val('')
          errorCallBack(XMLHttpRequest, textStatus, errorThrown)
        },
      }

      //三种方式均可
      $('#ExcelAgreement').ajaxSubmit(options)
      return false
    },
    success(data) {
      if (!data.hasError) {
        this.finished = true
        data.result.forEach((item, index) => {
          item.deleId = index
        })
        this.tableList = data.result
        this.updateMsgLength = data.result.length
        this.showTableList = this.tableList.filter((item, index) => {
          return (
            index >= (this.pageNo - 1) * this.pageSize &&
            index < this.pageNo * this.pageSize
          )
        })
      } else {
        this.isError = true
        this.errMsg = data.errorMsg
      }
    },
    //根据状态码判断是否是401
    error(XMLHttpRequest, textStatus, errorThrown) {
      if (XMLHttpRequest.status === '401' || XMLHttpRequest.status === '403') {
        localStorage.setItem('access_token', '')
        localStorage.setItem('refresh_token', '')
        localStorage.setItem('userName', '')
        // 只有在当前路由不是登录页面才跳转
        if (router.currentRoute.path !== '/login/loginFirst') {
          router.replace({
            path: '/login/loginFirst',
          })
        }
        //清除tab栏数据
        this.$store.state.sliderBar = []
        localStorage.removeItem('sliderBar')
      } else {
        this.$message({
          message: '数据请求失败',
          type: 'warning',
        })
      }
    },
    /**
     * @name: 点击上传欠薪诉求
     * @param {type}
     * @Author: luoyong/471826078@qq.com
     */
    uploadImployee() {
      let that = this
      if (!that.fileName == '') {
        that.active = 1
        that.uploadFileByAjaxSubmit(
          'api-r/rbp/import/importExcel',
          that.success,
          that.error
        )
      } else {
        that.$message({
          type: 'warning',
          message: '请先选择上传文件!',
        })
      }
    },
    /**
     * @name:取消上传
     * @param {type}
     * @Author: luoyong/471826078@qq.com
     */
    cancelUpload() {
      this.active = 0
      this.progress = 0
      this.fileName = ''
      this.finished = false
      this.isError = false
    },

    deleteTables(items) {
      this.$confirm('是否确定删除该条数据?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          let index1 = null,
            index2 = null
          this.tableList.forEach((item, index) => {
            if (item.deleId == items) {
              index1 = index
            }
          })
          this.showTableList.forEach((item, index) => {
            if (item.deleId == items) {
              index2 = index
            }
          })
          this.tableList.splice(index1, 1)
          //   this.showTableList.splice(index2, 1);

          this.showTableList = this.tableList.filter((item, index) => {
            return (
              index >= (this.pageNo - 1) * this.pageSize &&
              index < this.pageNo * this.pageSize
            )
          })
        })
        .catch(() => {
          this.$message({
            type: 'success',
            message: '已取消删除',
          })
        })
    },
    /**
     * @name: 确认导入
     * @param {type}
     * @Author: luoyong/471826078@qq.com
     */

    sureExportIn(val) {
      if (val.length) {
        this.$confirm('确认导入后将缓存数据写入数据库, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        })
          .then(() => {
            this.centerDialogVisible = true
            this.$nextTick(function () {
              this.progressUpload = 0
              this.$refs.hjprogressUpload.setProgress()
            })
            // const arr = val;
            // arr.forEach((item) => {
            //   delete item.deleId;
            // });
            const params = { rightsAppealImportDtoList: val }

            this.axios
              .post('/api-r/rbp/import/addImportExcel', params, {
                headers: {
                  'Content-Type': 'application/json', //设置请求头请求格式为JSON
                },
              })
              .then((response) => {
                if (response.data.hasError) {
                  this.isErrorUpload = true
                  return false
                }
                this.finishedUpload = true
                this.errList = response.data.result
                if (response.data.msgList.length) {
                  this.errList.forEach((item, index) => {
                    item.errmsg = response.data.msgList[index]
                  })
                }
                this.currentErrList = this.errList.filter((item, index) => {
                  return (
                    index >= (this.pageNoResult - 1) * this.pageSizeResult &&
                    index < this.pageNoResult * this.pageSizeResult
                  )
                })
                this.centerDialogVisible = false
              })
              .catch((error) => {
                this.isErrorUpload = true
              })
          })
          .catch(() => {
            this.$message({
              type: 'success',
              message: '已取消',
            })
          })
      } else {
        this.$message({
          type: 'warning',
          message: '导入数据为空，请先上传欠薪诉求',
        })
      }
    },
    sureStepExportIn() {
      if (this.tableList.length) {
        this.$confirm('确认导入数据吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        })
          .then(() => {
            this.centerDialogVisible = true
            this.$nextTick(function () {
              this.progressUpload = 0
              this.$refs.hjprogressUpload.setProgress()
            })
            const arr = this.tableList
            arr.forEach((item) => {
              delete item.deleId
            })
            const params = { rightsAppealImportDtoList: arr }

            this.axios
              .post('/api-r/rbp/import/judgmenInvalid', params, {
                headers: {
                  'Content-Type': 'application/json', //设置请求头请求格式为JSON
                },
              })
              .then((response) => {
                if (!response.data.hasError) {
                  this.wxList = response.data.result
                  this.active = 3
                } else {
                  this.$message({
                    showClose: true,
                    duration: 3000,
                    message: response.data.errorMsg,
                    type: 'error',
                  })
                }
                // this.finishedUpload = true;
                this.centerDialogVisible = false
              })
              .catch((error) => {
                // this.isErrorUpload = true;
              })
          })
          .catch(() => {
            this.$message({
              type: 'success',
              message: '已取消',
            })
          })
      } else {
        this.$message({
          type: 'warning',
          message: '导入数据为空，请先上传欠薪诉求',
        })
      }
    },
    /**
     * @name: 取消导入
     * @param {type}
     * @Author: luoyong/471826078@qq.com
     */
    cancleExportIn() {
      this.$confirm(
        '是否取消导入，如果确定取消，已上传的数据将被删除?',
        '温馨提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }
      )
        .then(() => {
          this.$message({
            type: 'success',
            message: '取消导入!',
          })
          this.active = 0
          this.progress = 0
          this.finished = false
          this.fileName = ''
          this.progressUpload = 0
          this.finishedUpload = false
          this.isError = false
          this.isErrorUpload = false
        })
        .catch(() => {
          //   this.$message({
          //     type: 'info',
          //     message: '已取消删除'
          //   });
        })
    },
  },
  mounted() {
    this.pageNo = 1
    this.pageSize = 5
    this.pageNoResult = 1
    this.pageSizeResult = 5
  },
}
</script>
<style lang="less" scoped>
/* 步骤条 */
/deep/ .el-step {
  .el-step__head.is-process {
    color: #fff;
    .el-step__icon.is-text {
      border: 2px solid #009588;
      background: #009588;
    }
  }

  .el-step__head.is-success {
    color: #009588;
  }
  .el-step__title.is-success {
    color: #009588;
  }

  .el-step__head.is-success .el-step__icon.is-text {
    border-color: #009588;
  }

  .el-step__line {
    border-color: #009588;
  }

  .el-step__title.is-process {
    color: #009588;
  }
}

.theme_default .mainCon {
  /deep/ .el-step {
    .el-step__head.is-process {
      color: #fff;
      .el-step__icon.is-text {
        border: 2px solid #3189ea !important;
        background: #3189ea;
      }
    }

    .el-step__head.is-success {
      color: #3189ea !important;
    }
    .el-step__title.is-success {
      color: #3189ea !important;
    }

    .el-step__head.is-success .el-step__icon.is-text {
      border-color: #3189ea !important;
    }

    .el-step__line {
      border-color: #3189ea !important;
    }

    .el-step__title.is-process {
      color: #3189ea !important;
    }
  }
}

.mainCon {
  top: 198px;
  &Step {
    padding-left: 100px;
    li {
      display: inline-block;
      width: 24%;
      &:last-child {
        width: 24%;
      }
      .numbers {
        display: inline-block;
        width: 32px;
        height: 32px;
        line-height: 32px;
        text-align: center;
        color: #fff;
        border-radius: 50%;
        background-color: #009588;
      }
      img {
        width: 32px;
        height: 32px;
        vertical-align: middle;
      }
      .info {
        font-size: 16px;
        display: inline-block;
      }
      .line {
        width: calc(100% - 150px);
        display: inline-block;
        border-bottom: 1px solid #009588;
        vertical-align: middle;
      }
    }
  }
  &Import {
    p {
      font-family: SourceHanSansCN-Medium;
      font-size: 28px;
      color: #333333;
      text-align: center;
      font-weight: bold;
      margin: 60px 0;
    }
    &Up {
      text-align: center;
      //   height: 36px;
      .el-input {
        max-width: 380px;
      }
    }
    &Tips {
      height: 14px;
      line-height: 14px;
      font-size: 14px;
      color: #333;
      margin: 24px 0 40px;
      vertical-align: middle;
      /deep/.el-link--inner {
        color: #409eff;
      }
    }
    &Progress {
      height: 60px;
      margin: 60px 0;
      &Back {
        margin: 0 auto;
        height: 20px;
        max-width: 1000px;
        background-color: #ebeef5;
        border-radius: 12px;
        border-radius: 12px;
        padding: 0 15px;
        span {
          display: inline-block;
          // width: 100%;
          height: 12px;
          background-image: linear-gradient(270deg, #33bea6 0%, #c8f1d5 100%);
          border-radius: 12px;
          border-radius: 12px;
        }
      }
      &Present {
        line-height: 16px;
        font-size: 16px;
        text-align: center;
        color: #333;
        margin-top: 22px;
      }
    }
  }
  &Tip {
    margin: 60px 0px;
    background-color: #f5f7fb;
    // height: 158px;
    padding: 30px;
    .downloadTip {
      color: #409eff;
    }
    h3 {
      line-height: 26px;
      height: 26px;
      font-size: 14px;
      font-weight: bold;
    }
    p {
      line-height: 26px;
      //   height: 26px;
      font-size: 14px;
      color: #2a2a2a;
    }
  }
  &Table {
    // padding: 36px 24px;
    &Tips {
      // font-family: SourceHanSansCN-Normal;
      font-size: 14px;
      color: #333333;
      margin-bottom: 16px;
      height: 36px;
      line-height: 36px;
      background: #fffbe6;
      padding: 0 20px;
    }
  }
  &Finshed {
    text-align: center;
    .img {
      width: 124px;
      height: 124px;
      font-size: 124px;
      color: #009588;
      margin: 60px auto 20px;
      display: block;
    }
    h2 {
      font-size: 28px;
      color: #009588;
    }
    p {
      margin-top: 11px;
      font-family: SourceHanSansCN-Regular;
      font-size: 16px;
      color: #333333;
      text-align: center;
      span {
        color: #009588;
      }
    }
  }
  &Bottom {
    text-align: center;
    .el-button {
      width: 126px;
    }
  }
}
// 修改专户弹窗样式
.uploadBox {
  display: inline-block;
  position: relative;
  margin-left: 10px;
  .uploadImg {
    width: 126px;
    height: 36px;
    padding: 0px;
    color: #009588;
    border: 1px solid #009588;
    cursor: pointer;
  }
  .upLoadDom {
    position: absolute;
    width: 126px;
    height: 36px;
    top: 0;
    left: 0;
    // opacity: 0;
    line-height: 0px;
    display: none;
    form {
      input {
        width: 96px;
        height: 36px;
        line-height: 0px;
        cursor: pointer;
      }
    }
  }
}
/deep/ .progress .el-dialog__header {
  border-color: transparent;
  .el-dialog__headerbtn {
    display: none;
  }
}
/deep/.el-tooltip__popper {
  width: 700px !important;
}

.theme_default .mainConFinshed {
  h2,
  .tips {
    color: #3189ea;
  }
  .img {
    color: #3189ea;
  }
}
.tipIcon {
  i {
    color: #ffaa00;
    margin-right: 4px;
    font-size: 20px;
    vertical-align: -2px;
  }
}
</style>
